<template>
  <div>
  	<div class="home-wrap" v-if="index">
      <img class="title" :src="title?title:'/static/imgs/title.png'" alt="">
      <img class="bg" v-show="bg" src="./bg1.png" alt="" @click="goexam">
      <img class="bg" v-show="!bg" src="./bg2.png" alt="" @click="goexam">
  	</div>
    <question v-if="question"  v-on:showres="displayRes"></question>
    <result v-if="result" :datas="this.data" v-on:showques="displayQues"></result>
  </div>
</template>
<script type="text/ecmascript-6">
import question from 'components/question/question';
import result from 'components/result/result';
import {wxconfig} from 'common/js/wxconfig';
  export default {
    props: {
    },
    data() {
      return {
        bg: true,
        question: '',
        index: 'true',
        result: '',
        data: '',
        url: '',
        title: ''
      };
    },
    created() {
      window.setInterval(() => {
        if (this.bg === true) {
          this.bg = false;
        } else {
          this.bg = true;
        }
      }, 500);
      var getexamInt = window.setInterval(() => {
        if (window.localStorage.opt_id !== 'undefined') {
          wxconfig(this);
          this.url = 'fiveques/getexam/?op_id=' + window.localStorage.opt_id;
          if (this.$route.query.exam_id !== 'undefined' && this.$route.query.exam_id) {
            this.url = this.url + '&exam_id=' + this.$route.query.exam_id;
          } else {
            this.url = this.url + '&exam_id=' + 2;
          }
          if (this.$route.query.source !== 'undefined' && this.$route.query.source) {
            this.url = this.url + '&source=' + this.$route.query.source;
          }
          this.$http.get(this.url).then((response) => {
            this.title = response.body.data.ques_info.title_img;
            if (response.body.data.has_done === true) {
              this.data = response.body.data;
              this.result = 'true';
              this.index = '';
              this.question = '';
            } else {
            }
          });
          window.clearInterval(getexamInt);
        }
      }, 500);
    },
    methods: {
      goexam() {
          this.result = '';
          this.index = '';
          this.question = 'true';
      },
      displayQues(msg) {
        this.question = 'true';
        this.index = '';
        this.result = '';
      },
      displayRes(msg) {
        this.result = 'true';
        this.index = '';
        this.question = '';
        this.url = 'fiveques/getexam/?op_id=' + window.localStorage.opt_id;
        if (this.$route.query.exam_id !== 'undefined' && this.$route.query.exam_id) {
          this.url = this.url + '&exam_id=' + this.$route.query.exam_id;
        } else {
          this.url = this.url + '&exam_id=' + 2;
        }
        if (this.$route.query.source !== 'undefined' && this.$route.query.source) {
          this.url = this.url + '&source=' + this.$route.query.source;
        }
        this.$http.get(this.url).then((response) => {
          this.data = response.body.data;
        });
      }
    },
    components: {
      question,
      result
    }
  };
</script>
<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl"
  .home-wrap
    position absolute
    min-height 100%;
    width 100%
    .title
      position: absolute;
      width: 100%;
      height: auto;
      z-index: 1;
      left: 0;
      top: 10px;
    .bg
      position absolute
      width 100%
      height auto
      left 0
      bottom 0
</style>
